import axios from "../service/index";
import React, {
  useEffect,
  useState,
  forwardRef,
  useImperativeHandle,
} from "react";

// 图形验证码
// forwardRef 用于：接收父组件传过来的ref
export default forwardRef(function Captcha(props, ref) {
  let [code, setCode] = useState({
    key: "",
    img: "",
  });
  const getCode = () => {
    axios.get("/captcha/api/math").then((res) => {
      console.log(res);
      setCode({
        key: res.key,
        img: res.img,
      });
      // 子组件调用父组件传过来的值，把key参数传给父组件，供登录使用
      // 登录需要用到key属性
      props.setKey(res.key);
    });
  };
  useEffect(() => { // 挂载阶段
    getCode();
  }, []);
  useImperativeHandle(ref, () => {
    // 用于：暴露方法给父组件使用。当登录失败时，父组件需要调用子组件的方法，重新生成验证码，
    return {
      getCode,
    };
  });
  return (
    <div>
      {/* 图形验证码 */}
      <img src={code.img} width={110} height={30} onClick={getCode} />
    </div>
  );
});
